<!--
 * @Author: hfWang
 * @Date: 2023-02-04 20:25:52
 * @LastEditTime: 2023-02-07 23:09:08
 * @Description: file content
 * @FilePath: \whf_blog\docs\.vitepress\theme\MyComps\MyAllDocs.vue
-->
<script setup lang="ts">
import { onMounted } from 'vue';
import allDocsInfo from '../../keyWord.json'
import { ref } from 'vue'
import { useRouter } from "vitepress";
import { titleMap } from '../../constant'

const router = useRouter();

const props = defineProps<{
  type?: string;
}>();
let allDocsNum = ref(0);
const keys = ref(Object.keys(allDocsInfo.keywords) as string[])

onMounted(() => {
  let arr = [] as any[]
  Object.keys(allDocsInfo.keywords).map(key => {
    arr = [...arr, ...allDocsInfo.keywords[key]]
    allDocsNum.value = allDocsNum.value + allDocsInfo.keywords[key].length
  })
  keys.value = props.type ? keys.value.filter(item => item === props.type) : keys.value
})

const getDocs = (type: string) => {
  return allDocsInfo.keywords[type]
}

const gotoTargetDocs = (item: any) => {
  router.go(item.link!)
}
</script>

<script lang="ts">
export default {
  name: "MyAllDocs",
};
</script>
<template>
  <div>
    <p v-if="!props.type">目前文章总数： {{ allDocsNum }} 篇</p>
    <div v-for="(type, index) in keys" :key="index" class="docs-group">
      <p class="type-title">
        <span>{{ titleMap[type] || type }}</span>
        <span>{{ getDocs(type).length }}篇</span>
      </p>
      <div
        v-for="(item, index) in getDocs(type)"
        :key="index"
        class="docs-item"
        @click="gotoTargetDocs(item)">
        🛩<span class="ml-8">{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>
<style scoped>
.docs-group {
  margin-bottom: 28px;
}

.type-title {
  font-size: 24px;
  border-left: 3px solid #60a5fa;
  border-bottom: 1px solid #ccc;
  padding: 3px 12px;
  display: flex;
  justify-content: space-between;
}

.docs-item {
  color: #60a5fa;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 8px;
}

.docs-item:hover {
  transform: scale(1.01);
}

.ml-8 {
  margin-left: 8px;
}
</style>